<div class="card border-{{ isSelfResponses ? 'info' : 'primary' }} mt-4">
  <div class="card-header bg-{{ isSelfResponses ? 'info' : 'primary' }}" [ngClass]="{ 'text-white': !isSelfResponses }">
    <span class="response-recipient"><b>To:</b> {{ recipient }}</span>
  </div>
  <div class="card-body table-responsive" style="padding: 0;">
    <table class="table">
      <tbody>
        <ng-container *ngFor="let response of responses">
          <tr>
            <td class="response-giver">
              <strong>From:</strong> {{ response.giver }}
            </td>
          </tr>
          <tr>
            <td>
              <tm-single-response [responseDetails]="response.responseDetails" [questionDetails]="feedbackQuestion.questionDetails"
                                  [isStudentPage]="true" [giverEmail]="response.giverEmail" [recipientEmail]="response.recipientEmail" [statistics]="statistics"></tm-single-response>
            </td>
          </tr>
          <tr *ngIf="response.participantComment">
            <td>
              <tm-comment-row
                              [mode]="CommentRowMode.EDIT"
                              [isVisibilityOptionEnabled]="false"
                              [isDisabled]="true"
                              [shouldHideSavingButton]="true"
                              [shouldHideClosingButton]="true"
                              [shouldHideEditButton]="true"
                              [shouldHideDeleteButton]="true"
                              [isFeedbackParticipantComment]="true"
                              [response]="response"
                              [questionShowResponsesTo]="feedbackQuestion.showResponsesTo"
                              [model]="response.participantComment | commentToCommentRowModel"
            ></tm-comment-row>
            </td>
          </tr>
          <tr *ngIf="response.instructorComments.length > 0">
            <td>
              <tm-comment-table
                  [response]="response"
                  [questionShowResponsesTo]="feedbackQuestion.showResponsesTo"
                  [model]="response.instructorComments | commentsToCommentTableModel: true : timezone"
                  [shouldHideClosingButtonForNewComment]="true"
              ></tm-comment-table>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</div>
